<template>
  <div class="header_margin-top">
    <div class="clearfix con-width-1200">
      <div class="public-title clearfix pos-rel">
       <h2 class="pos-rel course">Detail</h2>
        <h1 class="pos-abs">专家详情</h1>
        <div class="catage clearfix pos-abs">您所在位置：首页 > 专家团队 > 列表 > 详情</div>
      </div>
      <!-- <a href="javascript:void()" @click="$router.go(-1)" class="fxr return">返回</a> -->
      <div class="clear h10"></div>
      <div class="content-detail clearfix">
        <!-- <img class="img" src="http://47.104.69.11:9000/youamyy/jeditor/杜娟_1594275409647.jpg" alt="">-->
        <img class="img" :src="date1.toux"/>
        <div class="text-box">
          <div class="dorname">
            <div class="title1">{{date1.xingm }}</div>
            <div class="title2">{{date1.jianj}}</div>
            <div class="title2">擅长 : {{date1.shanc}}</div>
          </div>
          <div class="text">
            <p>{{date1.gongzjl}}</p>
          </div>
        </div>
        <div class="clear"></div>
        <div class="part3">
          <div class="title1">详细介绍</div>
          <div class="desc">
            <p style="text-indent:2em;" v-html="date1.xiangxjs">
            </p>
          </div>
        </div>
      </div>
      <div class="r-top rad5" @click="$router.go(-1)">
        <i class="iconfont icon-fanhuidingbu"></i>
        <a>返回上级</a>
      </div>
    </div>
  </div>
</template>

<script>
  // import BackToTop from './BackToTop'
  import _http from "../httpService";
  // import pdf from "vue-pdf";
  export default {
    name: "Detail",
    props: {
      msg: String,
    },
    components: {
      // BackToTop,
      // pdf,
    },
    data() {
      return {
        myBackToTopStyle: {
          right: "100px",
          bottom: "150px",
          width: "40px",
          height: "40px",
          "border-radius": "20px",
          "line-height": "40px",
          background: "#fff",
        },
        attachment: null,
        html: null,
        article: null,
        pdf_loading_progress: 0.0,
        date1: {},
      };
    },
    created() {
      _http.get("/zhuanjjsXq/zhuanjjsXq/queryByIdSSZJ?id=" + this.$route.params.id)
          .then((resp) => {
            if (resp.data.success) {
              this.date1 = resp.data.result;
            } else this.html = "<h1>文章正在读取中...</h1>";
          })
          .catch((error) => console.log(error))
          .finally(() => (this.loading = false));
    },
    methods: {
      progress(number) {
        this.pdf_loading_progress = number;
      },
      backToTop() {
        let distanceY = window.pageYOffset;
        let i = 0;
        this.interval = setInterval(() => {
          let next = Math.floor(
              this.easeInOutQuad(10 * i, distanceY, -distanceY, 500)
          );
          if (next <= this.backPosition) {
            window.scrollTo(0, this.backPosition);
            clearInterval(this.interval);
          } else {
            window.scrollTo(0, next);
          }
          i++;
        }, 17);
      },
    },

    watch: {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      $route() {
        _http.get("/zhuanjjsXq/zhuanjjsXq/queryByIdSSZJ?id=" + this.$route.params.id)
            .then((resp) => {
              if (resp.data.success) {
                this.date1 = resp.data.result;
              } else this.html = "<h1>文章正在读取中...</h1>";
            })
            .catch((error) => console.log(error))
            .finally(() => (this.loading = false));
      },
      immediate: true,
    },
  };
</script>

<style>
  @import "../assets/css/public.css";

  a.return {
    font: normal 12px/30px "Microsoft YaHei";
    color: #0fb4b6;
  }

  .r-top {
    cursor: pointer;
    color: #0fb4b6;
    text-align: center;
    margin-left: 580px;
    background: rgba(239, 252, 248, 0.99);
    padding: 10px;
    font-size: 16px;
    margin: 40px 0px 20px 20px;
  }

  a.return:hover {
    color: #753f37;
  }

  .showHtml {
    border: 1px solid #d6e2df;
    background: #fffefc;
    padding: 30px 22px;
    text-align: left;
  }

  .content-detail .img {
    width: 250px;
    height: auto;
    overflow: hidden;
    float: left;
  }

  .content-detail .text-box {
    margin-left: 306px;
    text-align: left;
  }

  .content-detail .title1 {
    font-size: 30px;
    color: #333333;
  }

  .content-detail .title1 .pubc-more {
    width: auto;
    padding: 0 15px;
  }

  .content-detail .title2 {
    font-size: 18px;
    color: #474747;
    margin-top: 20px;
    line-height: 1.9;
  }

  .content-detail .dorname {
    border-bottom: 1px dashed #ddd;
    padding-bottom: 60px;
    margin-bottom: 45px;
    padding-top: 0px;
  }

  .content-detail .text {
    font-size: 14px;
    color: #333333;
    line-height: 22px;
  }

  .content-detail .text p {
    margin-bottom: 20px;
    font-size:16px;
    line-height:26px;
  }

  .content-detail {
    padding-top: 20px;
  }

  .content-detail .part3 {
    padding-top: 68px;
    text-align: left;
  }

  .content-detail .part3 .title1 {
    font-size: 24px;
    color: #333333;
  }

  .content-detail .part3 .desc {
    font-size: 14px;
    color: #333333;
    line-height: 26px;
    padding-top: 26px;
  }

</style>
